import React from 'react'
import {View, Image, ScrollView, StyleSheet } from 'react-native'
import { Lt, NavTheme as Nav, Color, Label, Images, Touch, Jpp, Jx, Storage, Dialog, Button, Input, Navigator } from "../_utils"
import { eApp, AppPorps } from "../home/_home"
import { SegProjector } from "../_util"

export function loadHistory(cb){
    if(cb){
        Storage.promiseLoad(Storage.SEARCH_HISTORY)
        .then(histories=>{
            if(Jx.isArray(histories)){
                cb(histories);
            }
        });
    }
}

export class SearchBar extends React.PureComponent{
    constructor(props){
        super(props);
        this.histories = [];
        loadHistory(histories=>this.histories=histories);
        const {defaultValue} = this.props;
        this.inputText = (defaultValue || "");
        this.onSearch = this.onSearch.bind(this);
    }
    onSearch(){
        const {onSearch} = this.props;
        if(!onSearch){
            return;
        }
        const inputText = Jx.replaceTrim(this.inputText);
        let str = Jx.checkInput(inputText);
        if(str){
            Dialog.msg1(str);
            return;
        }
        onSearch(inputText);
        if(this.histories.indexOf(inputText) < 0){
            this.histories.push(inputText);
            Storage.save(Storage.SEARCH_HISTORY, this.histories);
        }
    }
    render(){
        let {placeholder, defaultValue, hideBack} = this.props;
        if(!placeholder){
            placeholder = "搜索商品";
        }
        return <View style={Nav.style}>
            {
                hideBack ? <Nav.Touch title = {"    "}/> : <Nav.TouchBack/>
            }
            <View style = {{flex:1, 
                height:Jpp.inputHeight, 
                borderRadius:(Jpp.inputHeight/2), 
                alignSelf:"center", 
                backgroundColor:"white", 
                flexDirection:"row", 
                alignItems:"center"
            }}>
                <Image style = {{marginLeft:Lt.margin}} source = {Images.sousuo}/>
                <Input.Default
                    style = {{flex:1}}
                    placeholder = {placeholder}
                    onChangeText = {t=>this.inputText=t}
                    defaultValue = {defaultValue}
                />
            </View>
            <Nav.Touch
                title = {"搜索"}
                style = {{color:Color.theme, fontSize:Lt.c16}}
                onPress = {this.onSearch}
            />
        </View>
    }
}

export class ApplyHistory extends React.PureComponent{
    constructor(props){
        super(props);

        this.state = {
            histories:[],
        }
        loadHistory(histories=>{
            this.setState({histories});
        })
        this.appIdx = 0;
        this.onDelete = this.onDelete.bind(this);
        this.onSearch = this.onSearch.bind(this);
    }
    static navigationOptions = {
        // header:null,
        tabBarIcon : ({focused, tintColor})=><Image source={focused ? Images.tab_search_red : Images.tab_search}/>
    }
    onSearch(inputText){
        Navigator.push("ApplySearch", {appIdx:this.appIdx, defaultValue:inputText})
    }
    onDelete(){
        Dialog.msg2("清空搜索记录",()=>{
            Storage.save(Storage.SEARCH_HISTORY, []);
            this.setState({histories:[]});
        })
    }
    render(){
        return <View style = {{flex:1}}>
            <Nav.StateBar />
            <SearchBar onSearch = {this.onSearch} hideBack = {true}/>
            <SegProjector {...AppPorps} 
                fields={eApp.idxs.map(v=>eApp.names[v])}
                onChange = {appIdx=>this.appIdx = appIdx}
            />
            <View style = {{paddingTop:20, padding:Lt.pad, backgroundColor:"white", flexDirection:"row", justifyContent:"space-between", alignItems:"center"}}>
                <Label style = {{fontSize:Lt.c18, color:Color.c9}}>历史搜索</Label>
                <Touch onPress = {this.onDelete} style = {{padding:Lt.pad}}>
                    <Image source = {Images.shanchu}/>
                </Touch>
            </View>
            <ScrollView>
                <View style = {{flex:1, backgroundColor:"white", flexDirection:"row", flexWrap:"wrap"}}>
                {
                    this.state.histories.map((v,i)=><Button.Pure2 
                        key = {i}
                        // title = {v}
                        style = {styles.button}
                        onPress = {this.onSearch.bind(this, v)}
                    >
                        <Label style={{color:Color.c6, fontSize:Lt.c16}}
                            numberOfLines={1} 
                            ellipsizeMode={"tail"}
                        >{v}</Label>
                    </Button.Pure2>)
                }
                </View>
            </ScrollView>
        </View>
    }
}
const styles = StyleSheet.create({
    button : {
        paddingHorizontal:Lt.pad, 
        marginHorizontal:Lt.margin,
        marginTop:Lt.margin, 
        backgroundColor:Color.back, 
        // color:Color.c6, 
        // fontSize:Lt.c16,
        justifyContent:"center",
        alignItems:"center",
    }
})